React useState: Optimalisering av State Hook og beste praksis

useState-hooken er en hjørnestein i tilstandshåndtering for funksjonelle komponenter i React. Selv om den er enkel å bruke, kan feilaktig håndtering føre til ytelsesflaskehalser og uventet oppførsel, spesielt i komplekse applikasjoner. Denne guiden gir en omfattende utforskning av optimaliseringsteknikker og beste praksis for useState, og sikrer at dine React-applikasjoner er ytelsessterke, vedlikeholdbare og skalerbare for et globalt publikum.

Forstå det grunnleggende i useState

Før vi dykker ned i optimalisering, la oss raskt repetere det grunnleggende. useState-hooken lar deg legge til tilstand i funksjonelle komponenter. Den tar en initiell tilstandsverdi som argument og returnerer en matrise som inneholder den nåværende tilstanden og en funksjon for å oppdatere den.

Eksempel:

            import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Antall: {count}</p>
      <button onClick={() => setCount(count + 1)}>Øk</button>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

I dette eksempelet holder count den nåværende tilstandsverdien, og setCount er funksjonen som brukes til å oppdatere den. Et klikk på knappen øker antallet.

Vanlige fallgruver og ytelsesproblemer med useState

Selv om useState kan virke enkel, kan den introdusere ytelsesproblemer hvis den ikke brukes forsiktig. Her er noen vanlige fallgruver:

• Unødvendige re-rendringer: Det hyppigste problemet oppstår når komponenter re-rendres selv om deres props ikke har endret seg. Dette kan skje når tilstanden oppdateres ofte, eller når oppdateringer utløser unødvendige re-rendringer i barnekomponenter.
• Direkte tilstandsmutasjon: Å modifisere tilstanden direkte (f.eks. state.property = newValue) omgår Reacts oppdateringsmekanisme og kan føre til uforutsigbar oppførsel. Bruk alltid tilstandsoppdateringsfunksjonen som leveres av useState.
• Komplekse tilstandsoppdateringer: Å utføre kostbare beregninger eller komplekse transformasjoner i tilstandsoppdateringsfunksjonen kan gjøre applikasjonen tregere.
• Feilaktig starttilstand: Å gi en feil eller dårlig initialisert starttilstand kan føre til feil og uventet oppførsel senere.

Optimaliseringsteknikker for useState

La oss nå utforske ulike optimaliseringsteknikker for å redusere disse problemene og forbedre ytelsen til dine React-applikasjoner:

1. Bruk av funksjonelle oppdateringer

Når du oppdaterer tilstanden basert på dens forrige verdi, bruk den funksjonelle formen av tilstandsoppdateringsfunksjonen. Dette sikrer at du jobber med den mest oppdaterte tilstanden, spesielt i asynkrone scenarioer eller når flere oppdateringer blir gruppert sammen.

Eksempel (Feil):

            function IncorrectComponent() {
  const [count, setCount] = useState(0);

  const incrementTwice = () => {
    setCount(count + 1);
    setCount(count + 1); // Potensielt feil: avhenger av en utdatert `count`-verdi
  };

  return (
    <div>
      <p>Antall: {count}</p>
      <button onClick={incrementTwice}>Øk to ganger</button>
    </div>
  );
}

            

              
                Copy
              
            
          

Eksempel (Riktig):

            function CorrectComponent() {
  const [count, setCount] = useState(0);

  const incrementTwice = () => {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1); // Riktig: bruker forrige tilstand for hver oppdatering
  };

  return (
    <div>
      <p>Antall: {count}</p>
      <button onClick={incrementTwice}>Øk to ganger</button>
    </div>
  );
}

            

              
                Copy
              
            
          

I det riktige eksempelet mottar tilstandsoppdateringsfunksjonen den forrige tilstanden som et argument (prevCount), noe som lar deg utføre nøyaktige oppdateringer uavhengig av timing eller gruppering.

2. Immutabilitet er nøkkelen

Aldri modifiser tilstanden direkte. Lag alltid en ny kopi av tilstandsobjektet eller -matrisen når du oppdaterer. Dette sikrer at React effektivt kan oppdage endringer og bare utløse re-rendringer når det er nødvendig.

Eksempel (Feil - Direkte mutasjon):

            function IncorrectObjectComponent() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const updateName = () => {
    user.name = 'Jane'; // Direkte mutasjon: Unngå dette!
    setUser(user); // React oppdager kanskje ikke endringen
  };

  return (
    <div>
      <p>Navn: {user.name}, Alder: {user.age}</p>
      <button onClick={updateName}>Oppdater navn</button>
    </div>
  );
}

            

              
                Copy
              
            
          

Eksempel (Riktig - Bruk av immutabilitet):

            function CorrectObjectComponent() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const updateName = () => {
    setUser({ ...user, name: 'Jane' }); // Lag et nytt objekt med det oppdaterte navnet
  };

  return (
    <div>
      <p>Navn: {user.name}, Alder: {user.age}</p>
      <button onClick={updateName}>Oppdater navn</button>
    </div>
  );
}

            

              
                Copy
              
            
          

I det riktige eksempelet lager spredningsoperatøren (...) en grunn kopi av user-objektet, noe som sikrer at setUser mottar et nytt objekt og utløser en re-rendring.

3. Bruk av useMemo for å unngå unødvendige re-rendringer

useMemo-hooken kan brukes til å memoize (mellomlagre) resultatet av kostbare beregninger eller objektopprettelser. Dette forhindrer at disse beregningene blir utført unødvendig på hver re-rendring.

Eksempel:

            import React, { useState, useMemo } from 'react';

function ExpensiveCalculationComponent() {
  const [count, setCount] = useState(0);

  // Simuler en kostbar beregning
  const expensiveValue = useMemo(() => {
    console.log('Utfører kostbar beregning...');
    let result = 0;
    for (let i = 0; i < 100000000; i++) {
      result += i;
    }
    return result;
  }, []); // Tomt avhengighetsarray: beregn kun én gang ved første rendring

  return (
    <div>
      <p>Antall: {count}</p>
      <p>Kostbar verdi: {expensiveValue}</p>
      <button onClick={() => setCount(count + 1)}>Øk antall</button>
    </div>
  );
}

            

              
                Copy
              
            
          

I dette eksempelet blir expensiveValue bare beregnet én gang når komponenten rendres for første gang. Etterfølgende re-rendringer (utløst av count-tilstandsoppdateringen) vil bruke den mellomlagrede verdien, og unngå den kostbare beregningen.

4. useCallback for memoizing av hendelseshåndterere

Når du sender hendelseshåndteringsfunksjoner som props til barnekomponenter, bruk useCallback for å memoize funksjonen. Dette forhindrer at barnekomponenten re-rendres unødvendig når foreldrekomponenten re-rendres.

Eksempel:

            import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  // Memoize økningsfunksjonen med useCallback
  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]); // Avhengighetsarray: lag funksjonen på nytt kun når 'count' endres

  return (
    <div>
      <p>Antall: {count}</p>
      <ChildComponent onClick={increment} />
    </div>
  );
}

// Antar at ChildComponent er memoized med React.memo
const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent re-rendret!');
  return <button onClick={onClick}>Øk (Barn)</button>;
});

            

              
                Copy
              
            
          

I dette eksempelet memoizer useCallback increment-funksjonen, noe som forhindrer ChildComponent fra å re-rendre med mindre count-verdien (og dermed increment-funksjonen) endres.

5. Del opp tilstand i mindre, uavhengige deler

Hvis komponenten din har et stort og komplekst tilstandsobjekt, vurder å dele det opp i mindre, uavhengige tilstandsdeler ved å bruke flere useState-hooks. Dette lar React bare oppdatere de spesifikke delene av komponenten som avhenger av den endrede tilstanden, noe som reduserer unødvendige re-rendringer.

Eksempel (Før - Stort tilstandsobjekt):

            function LargeStateComponent() {
  const [state, setState] = useState({
    name: 'John',
    age: 30,
    city: 'New York',
    country: 'USA'
  });

  const updateName = () => {
    setState({ ...state, name: 'Jane' });
  };

  const updateAge = () => {
    setState({ ...state, age: 31 });
  };

  return (
    <div>
      <p>Navn: {state.name}</p>
      <p>Alder: {state.age}</p>
      <p>By: {state.city}</p>
      <p>Land: {state.country}</p>
      <button onClick={updateName}>Oppdater navn</button>
      <button onClick={updateAge}>Oppdater alder</button>
    </div>
  );
}

            

              
                Copy
              
            
          

Eksempel (Etter - Oppdelt tilstand):

            function SplitStateComponent() {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(30);
  const [city, setCity] = useState('New York');
  const [country, setCountry] = useState('USA');

  const updateName = () => {
    setName('Jane');
  };

  const updateAge = () => {
    setAge(31);
  };

  return (
    <div>
      <p>Navn: {name}</p>
      <p>Alder: {age}</p>
      <p>By: {city}</p>
      <p>Land: {country}</p>
      <button onClick={updateName}>Oppdater navn</button>
      <button onClick={updateAge}>Oppdater alder</button>
    </div>
  );
}

            

              
                Copy
              
            
          

Ved å dele opp tilstanden i individuelle useState-hooks, vil en oppdatering av name bare utløse en re-rendring av de delene av komponenten som avhenger av name-tilstanden, noe som forbedrer ytelsen.

6. "Lazy" initialisering for kostbar starttilstand

Hvis beregningen av starttilstanden er beregningsmessig kostbar, bruk "lazy" initialiseringsfunksjonen til useState. I stedet for å gi den initiale verdien direkte, kan du sende en funksjon som returnerer den initiale verdien. Denne funksjonen vil bare bli utført én gang, under den første rendringen.

Eksempel:

            import React, { useState } from 'react';

function LazyInitializationComponent() {
  // Kostbar funksjon for å beregne starttilstand
  const expensiveInitialState = () => {
    console.log('Beregner starttilstand...');
    let result = 0;
    for (let i = 0; i < 100000000; i++) {
      result += i;
    }
    return result;
  };

  const [value, setValue] = useState(expensiveInitialState);

  return (
    <div>
      <p>Verdi: {value}</p>
      <button onClick={() => setValue(value + 1)}>Øk</button>
    </div>
  );
}

            

              
                Copy
              
            
          

I dette eksempelet blir expensiveInitialState-funksjonen bare utført én gang når komponenten monteres. Hvis du hadde sendt resultatet av expensiveInitialState() direkte til useState, ville den blitt utført på hver re-rendring, selv om starttilstanden bare trenger å beregnes én gang.

7. Bruk av useReducer for kompleks tilstandslogikk

For komponenter med kompleks tilstandslogikk, som involverer flere underverdier eller innviklede tilstandsoverganger, bør du vurdere å bruke useReducer-hooken i stedet for useState. useReducer gir en mer strukturert og forutsigbar måte å håndtere tilstand på, spesielt når du jobber med relaterte tilstandsoppdateringer.

Eksempel:

            import React, { useReducer } from 'react';

// Definer reducer-funksjonen
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'RESET':
      return { ...state, count: 0 };
    default:
      return state;
  }
};

// Starttilstand
const initialState = { count: 0 };

function ReducerComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Antall: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Øk</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Reduser</button>
      <button onClick={() => dispatch({ type: 'RESET' })}>Tilbakestill</button>
    </div>
  );
}

            

              
                Copy
              
            
          

I dette eksempelet håndterer useReducer count-tilstanden og gir en dispatch-funksjon for å utløse tilstandsoppdateringer basert på forskjellige handlinger. Denne tilnærmingen er spesielt gunstig for å håndtere tilstand med flere relaterte oppdateringer eller komplekse overganger.

8. React.memo for memoizing av funksjonelle komponenter

Pakk dine funksjonelle komponenter inn i React.memo for å forhindre re-rendringer når props ikke har endret seg. React.memo utfører en grunn sammenligning av props og re-rendrer komponenten bare hvis props er forskjellige.

Eksempel:

            import React from 'react';

// Memoize komponenten med React.memo
const MyMemoizedComponent = React.memo(({ data }) => {
  console.log('MyMemoizedComponent re-rendret!');
  return <p>Data: {data}</p>;
});

            

              
                Copy
              
            
          

React.memo kan forbedre ytelsen betydelig, spesielt for komponenter som re-rendres ofte med statiske eller sjelden endrede props.

Beste praksis for useState i en global kontekst

Når du utvikler React-applikasjoner for et globalt publikum, bør du vurdere disse tilleggsmetodene:

• Internasjonalisering (i18n): Bruk et bibliotek som react-intl eller i18next for å håndtere oversettelser og tilpasse applikasjonens brukergrensesnitt til forskjellige språk og lokaliteter. Tilstand relatert til gjeldende lokalitet bør håndteres nøye for å sikre konsistent og korrekt visning av tekst og tall. For eksempel varierer datoer, valutaer og tallformater mye over hele verden.
• Lokalisering (l10n): Vurder forskjellige kulturelle konvensjoner når du viser data. For eksempel varierer datoformater (MM/DD/YYYY vs DD/MM/YYYY), og valutasymboler er forskjellige for hvert land (€, $, ¥). Tilstand relatert til disse innstillingene bør lokaliseres.
• Høyre-til-venstre (RTL) layouter: Sørg for at applikasjonen din støtter RTL-språk som arabisk og hebraisk. Bruk logiske CSS-egenskaper (f.eks. margin-inline-start i stedet for margin-left) og biblioteker som rtlcss for å håndtere layoutspeiling. Håndter layoutretningen ved hjelp av tilstand om nødvendig.
• Tidssoner: Vær oppmerksom på tidssoner når du håndterer datoer og klokkeslett. Bruk et bibliotek som moment-timezone eller date-fns-timezone for å håndtere tidssonekonverteringer og vise tider i brukerens lokale tidssone. Brukerens nåværende tidssone kan lagres i tilstanden og oppdateres basert på deres plassering.
• Tilgjengelighet (a11y): Design applikasjonen din med tilgjengelighet i tankene, og følg WCAG-retningslinjene. Sørg for at komponentene dine er brukbare for personer med nedsatt funksjonsevne, inkludert de som bruker skjermlesere или hjelpeteknologi. Sørg for eksempel for at alle skjemaelementer har etiketter, og gi alternativ tekst for bilder. Vurder å bruke en linter som eslint-plugin-jsx-a11y for å fange opp vanlige tilgjengelighetsproblemer.

Praktiske eksempler og bruksområder

La oss se på noen praktiske eksempler på hvordan man kan anvende disse optimaliseringsteknikkene i virkelige scenarioer:

1. Optimalisering av en søkekomponent

Tenk deg en søkekomponent som filtrerer en stor liste med elementer basert på brukerens input. For å optimalisere denne komponenten kan du bruke useMemo til å memoize den filtrerte listen og useCallback til å memoize søkehåndtereren.

            import React, { useState, useMemo, useCallback } from 'react';

function SearchComponent({ items }) {
  const [searchTerm, setSearchTerm] = useState('');

  // Memoize den filtrerte listen
  const filteredItems = useMemo(() => {
    console.log('Filtrerer elementer...');
    return items.filter(item =>
      item.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [items, searchTerm]);

  // Memoize søkehåndtereren
  const handleSearch = useCallback(event => {
    setSearchTerm(event.target.value);
  }, []);

  return (
    <div>
      <input type="text" placeholder="Søk..." onChange={handleSearch} />
      <ul>
        {filteredItems.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

            

              
                Copy
              
            
          

I dette eksempelet blir filteredItems bare beregnet på nytt når items eller searchTerm endres. handleSearch-funksjonen er memoized, noe som forhindrer unødvendige re-rendringer av barnekomponenter.

2. Optimalisering av en skjemakomponent

Skjemaer involverer ofte flere tilstandsoppdateringer og valideringer. For å optimalisere en skjemakomponent, bruk useReducer til å håndtere skjematilstanden og useCallback til å memoize innsendingshåndtereren for skjemaet.

            import React, { useReducer, useCallback } from 'react';

// Definer reducer-funksjonen
const formReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return { ...state, [action.field]: action.value };
    case 'SUBMIT':
      // Utfør validering her
      return state;
    default:
      return state;
  }
};

// Starttilstand
const initialFormState = {
  name: '',
  email: '',
  message: ''
};

function FormComponent() {
  const [state, dispatch] = useReducer(formReducer, initialFormState);

  // Memoize innsendingshåndtereren for skjemaet
  const handleSubmit = useCallback(event => {
    event.preventDefault();
    dispatch({ type: 'SUBMIT' });
    console.log('Skjema sendt:', state);
  }, [state]);

  const handleChange = (event) => {
    dispatch({ type: 'UPDATE_FIELD', field: event.target.name, value: event.target.value });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Navn:
        <input type="text" name="name" value={state.name} onChange={handleChange} />
      </label>
      <label>
        E-post:
        <input type="email" name="email" value={state.email} onChange={handleChange} />
      </label>
      <label>
        Melding:
        <textarea name="message" value={state.message} onChange={handleChange} />
      </label>
      <button type="submit">Send</button>
    </form>
  );
}

            

              
                Copy
              
            
          

I dette eksempelet håndterer useReducer skjematilstanden, og useCallback memoizer handleSubmit-funksjonen. Dette bidrar til å forbedre ytelsen til skjemakomponenten, spesielt når man håndterer komplekse valideringer eller asynkrone operasjoner.

Konklusjon

useState-hooken er et kraftig verktøy for å håndtere tilstand i funksjonelle React-komponenter. Ved å forstå dens nyanser og anvende optimaliseringsteknikkene som er diskutert i denne guiden, kan du bygge ytelsessterke, vedlikeholdbare og skalerbare React-applikasjoner for et globalt publikum. Husk å prioritere immutabilitet, memoize kostbare beregninger og hendelseshåndterere, dele opp tilstand i mindre biter når det er hensiktsmessig, og vurdere å bruke useReducer for kompleks tilstandslogikk. Ha alltid den globale konteksten til applikasjonen din i tankene, med tanke på i18n, l10n, RTL-layouter, tidssoner og tilgjengelighet. Ved å følge disse beste praksisene kan du sikre at dine React-applikasjoner ikke bare er raske og effektive, men også tilgjengelige og brukbare for brukere over hele verden.

Videre læring

• React-dokumentasjon: https://reactjs.org/docs/hooks-state.html
• useReducer Hook: https://reactjs.org/docs/hooks-reference.html#usereducer
• useMemo Hook: https://reactjs.org/docs/hooks-reference.html#usememo
• useCallback Hook: https://reactjs.org/docs/hooks-reference.html#usecallback
• React.memo: https://reactjs.org/docs/react-api.html#reactmemo